<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="data/myform.css" type="text/css" media="screen" charset="utf-8">
		<style>
			#areaA {
				margin: 50px;
				width:700px;
				height:360px;
			}
			.controls {
				margin: 50px;
			}
			#tpl {
				display: none;
			}
		</style>
        <title>Initialization in Layout</title>
	</head>
	<body>

		<div id="tpl">
            <div class="myform">
                <div class="block">
                    <div class="label"><label for="title">Book title</label></div><div><input type="text" name="title"  id="title" value="" placeholder="Title" /></div>
                    <div class="label"><label for="author">Author</label></div><div><input type="text" name="author" id="author" value="" placeholder="Author" /></div>
                </div>
                <div class="block_right">
                    <label for="in_store">In store</label><input type="checkbox" name="in_store" id="in_store" checked />
                </div>
                <fieldset>
                    <legend>Genre</legend>
                    <div>
                        <input type="radio" name="genre" value="poetry" id="genre1" /><label for="genre1">Poetry</label>
                    </div>
                    <div>
                        <input type="radio" name="genre" value="horror" id="genre2" checked /><label for="genre2">Horror</label>
                    </div>
                    <div>
                        <input type="radio" name="genre" value="short_story" id="genre3" /><label for="genre3">Short Story</label>
                    </div>
                    <div>
                        <input type="radio" name="genre" value="fantasy" id="genre4" /><label for="genre4">Fantasy</label><br/>
                    </div>
                    <div>
                        <input type="radio" name="genre" value="drama" id="genre5" /><label for="genre5">Drama</label>
                    </div>
                    <div>
                        <input type="radio" name="genre" value="tragedy" id="genre6" /><label for="genre6">Tragedy</label>
                    </div>

                </fieldset>
                <div class="block">
                    <div class="label"><label for="rank">Rank</label></div>
                    <select name="rank" id="rank">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>
                <div class="block">
                    <div class="label"><label for="annotation">Annotation</label></div>
                    <textarea name="annotation" id="annotation">some book annotation is here</textarea>
                </div>
            </div>
		</div>
		<div id="areaA"></div>

		<div class="controls">
			<input type="button" value="Set data" onclick="set_form();" />
			<input type="button" value="Get data" onclick="get_form();" />
			<input type="button" value="Clear form" onclick="clear_form();" />
			<input type="button" value="Focus" onclick="focus_form();" />
			<input type="button" value="Load data" onclick="load_form();" />
		</div>


		<script type="text/javascript" charset="utf-8">
			webix.ui({
				container: "areaA",
				view: 'layout',
				cols: [
					{ template: "left bar" },
					{
						id: "formView",
						view:"htmlform",
						template: "html->tpl",
						width: 500
					},
					{ template: "right bar" }
				]
			});

			function set_form() {
				$$('formView').setValues({
					title: "Book title 1",
					author: "Author test",
					in_store: false,
					rank: "4",
					genre: "fantasy",
					annotation: "some test",
					submit: "Order"
				});
			}

			function get_form() {
				var values = $$('formView').getValues();
				console.log(values);
			}

			function clear_form() {
				$$('formView').clear();
			}

			function focus_form(item) {
				$$('formView').focus();
			}

			function load_form() {
				$$('formView').load("data/book.xml", "xml");
			}
		</script>
	</body>
</html>